<template>
  <div>
    <el-container style="height: 500px">
      <el-header style="text-align: right; font-size: 12px">
        <el-row>
          <router-link to="/user/"
            ><el-col :span="4"
              ><div class="grid-content bg-purple">首页</div></el-col
            ></router-link
          >
          <router-link to="/article/queryAllArticle"
            ><el-col :span="4"
              ><div class="grid-content bg-purple-light">全部文章</div></el-col
            ></router-link
          >
          <router-link to="/user/"
            ><el-col :span="4"
              ><div class="grid-content bg-purple">1</div></el-col
            ></router-link
          >
          <router-link to="/user/"
            ><el-col :span="4"
              ><div class="grid-content bg-purple-light">1</div></el-col
            ></router-link
          >
          <router-link to="/user/register" v-if="msg"
            ><el-col :span="4"
              ><div class="grid-content bg-purple">注册</div></el-col
            ></router-link
          >
          <router-link to="/user/login" v-if="msg"
            ><el-col :span="4"
              ><div class="grid-content bg-purple-light">登录</div></el-col
            ></router-link
          >
          <router-link to="/user/userPage" v-if="page"
            ><el-col :span="4"
              ><div class="grid-content bg-purple-light">控制台</div></el-col
            ></router-link
          >
        </el-row>
      </el-header>

      <el-main><router-view></router-view></el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "UserMain",
  data() {
    return {
      msg: "",
      page: "",
    };
  },
  watch: {
    userLogin() {
      let userLogin = sessionStorage.getItem("userLogin");
      let msg;
      let page;
      if (userLogin == null) {
        msg = true;
        this.msg = msg;
      } else {
        msg = false;
        this.msg = msg;
        if (userLogin != null) {
          page = true;
          this.page = page;
        } else {
          page = false;
          this.page = page;
        }
      }
      alert(msg);
      alert(page);
    },
  },
};
</script>


<style scoped>
.el-header {
  background-color: rgb(84, 92, 100);
  color: rgb(255, 255, 255);
  line-height: 60px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 4px;
  text-align: center;
  color: #fff;
  font-size: 14px;
  height: 60px;
  line-height: 60px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
}
el-col:hover div {
  background: red;
}
</style>
